<template>
  <div class="userInfoPopupView">
    <div class="head">
      <span :class="{'active':active===1}" @click="active=1">客户资料</span>
      <span :class="{'active':active===2}" @click="active=2">客户订单</span>
      <span  :class="{'active':active===3}" @click="active=3">客户足迹</span>
    </div>
    <div class="infoBox" v-show="active===1">
      <div class="row-1">客户信息</div>
      <div class="row-2">
        <span class="sp1">姓名</span>
        <span class="sp2">{{ userInfoData.nickname }}</span>
      </div>
      <div class="row-2">
        <span class="sp1">职业</span>
        <span class="sp2">{{ userInfoData.profession }}</span>
      </div>
      <div class="row-2">
        <span class="sp1">生日</span>
        <span class="sp2">{{ userInfoData.birth }}</span>
      </div>
      <div class="row-2">
        <span class="sp1">是否需要金融服务</span>
        <span class="sp2">{{ userInfoData.is_need_financial }}</span>
      </div>
      <div class="row-2">
        <span class="sp1">加入创客时间</span>
        <span class="sp2">{{ userInfoData.join_promoter }}</span>
      </div>
      <div class="row-1">客户档案</div>
      <div class="row-2">
        <span class="sp1">房屋面积</span>
        <span class="sp2">{{ userInfoData.floor_space }}</span>
      </div>
      <div class="row-2">
        <span class="sp1">房屋类型</span>
        <span class="sp2">{{ userInfoData.house_type }}</span>
      </div>
      <div class="row-2">
        <span class="sp1">房屋状态</span>
        <span class="sp2">{{ userInfoData.house_status }}</span>
      </div>
      <div class="row-2">
        <span class="sp1">装修预算</span>
        <span class="sp2">{{ userInfoData.decorate_budget }}</span>
      </div>
      <div class="row-2">
        <span class="sp1">装修风格偏好</span>
        <span class="sp2">{{ userInfoData.decorate_style }}</span>
      </div>
      <div class="row-2">
        <span class="sp1">家具风格偏好</span>
        <span class="sp2">{{ userInfoData.Household_style }}</span>
      </div>
      <div class="row-1">联系方式</div>
      <div class="row-2">
        <span class="sp1">电话</span>
        <span class="sp2">{{ userInfoData.mobile }}</span>
      </div>
      <div class="row-2">
        <span class="sp1">新房地址</span>
        <span class="sp2">{{ userInfoData.estate_address }}</span>
      </div>
      <div class="row-1">备注</div>
      <textarea v-model="text" :placeholder="userInfoData.remark"></textarea>
      <div class="btn" @click="upRemark">更新备注</div>
    </div>
    <div class="orderBox" v-show="active===2" @scroll="scrollEvent">
      <div class="row-1">最近订单</div>
      <el-collapse>
        <el-collapse-item  :name="index"  :title="item.product_lst[0].product_title"  v-for="(item,index,key) in ConsumerOrder" :key="index">
          <div class="row-2"><span class="sp1">商品链接</span><a :href="item.product_lst[0].main_imgurl" class="sp2">{{item.product_lst[0].main_imgurl}}</a></div>
          <div class="row-2"><span class="sp1">订单号</span><span class="sp2">{{item.order_code}}</span></div>
          <div class="row-2"><span class="sp1">下单时间</span><span class="sp2">{{formatDate(item.create_time)}}</span></div>
          <div class="row-2"><span class="sp1">收货地址</span><span class="sp2">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</span>
            <el-popover
                ref="xxxx"
                placement="left"
                title="修改收货地址"
                width="400"
                trigger="click">
              <div id="dialogBox">
                <el-select v-model="value1" @change="select1" placeholder="请选择省份">
                  <el-option
                      v-for="item in options1"
                      :key="item.cityid"
                      :label="item.city_name"
                      :value="item.cityid">
                  </el-option>
                </el-select>
                <el-select v-model="value2" @change="select2" placeholder="请选择城市">
                  <el-option
                      v-for="item in options2"
                      :key="item.cityid"
                      :label="item.city_name"
                      :value="item.cityid">
                  </el-option>
                </el-select>
                <el-select v-model="value3" @change="select3" placeholder="请选择县区">
                  <el-option
                      v-for="item in options3"
                      :key="item.cityid"
                      :label="item.city_name"
                      :value="item.cityid">
                  </el-option>
                </el-select>
              </div>
              <el-input v-model="address" placeholder="请输入详细地址" style="margin: 10px 0"></el-input>
              <el-button type="info" @click="cleanFn()" style="width: 182px">取 消</el-button>
              <el-button type="primary"  style="width: 182px" @click="confirmFn(item.id,item.username,item.mobile,index)">确 定</el-button>
            <el-button slot="reference" type="primary" icon="el-icon-edit" circle size="mini"></el-button>
            </el-popover>
          </div>
          <div class="row-2"><span class="sp1">订单总价</span><span class="sp2">{{item.price}}（含：邮费{{item.move_price}}元）</span></div>
          <div class="row-2"><span class="sp1">优惠劵</span><span class="sp2">{{item.product_lst[0].main_imgurl}}</span></div>
          <div class="row-2"><span class="sp1"></span><span class="sp2">{{item.product_lst[0].main_imgurl}}</span></div>
          <div class="row-2"><span class="sp1">买家留言</span><span class="sp2">{{item.remark}}</span></div>
          <div class="row-3">
            <el-button type="success">{{item.order_status==1?'待付款':item.order_status==2?'待发货':item.order_status==3?'待收货':item.order_status==4?'已完成':'已关闭'}}</el-button>
<!--            <el-button type="warning">核对订单</el-button>-->
          </div>
        </el-collapse-item>
      </el-collapse>

    </div>
    <div class="logsBox"  v-show="active===3">
      <div class="row" v-for="(item,index,key) in productLogs" :key="key">
        <img class="pl" :src="item.main_imgurl">
        <div class="pr">
          <p class="p1">{{item.store_name}}</p>
          <p class="p2">{{item.product_title}}</p>
          <p class="p3">¥ {{item.price}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "userInfo-popup",
  props: ['msgId'],
  data() {
    return {
      address:'',
      value1:'',
      value2:'',
      value3:'',
      options1:[],//省份
      options2:[],//城市
      options3:[],//县区
      addShow:false,
      userInfoData: {},
      ConsumerOrder: [],
      productLogs: [],
      orderData: [],
      text:'',
      active:1,
      page: 1,
      pagesize: 20,
      noMore: 10,
    }
  },
  mounted() {
    this.getProvince();
    this.getUserInfo();
    this.getproductLogs();
    this.getOrder();
    this.getConsumerOrder();
  },
  methods: {
    cleanFn(){
      this.$refs['xxxx'][0].doClose()
    },
    confirmFn(id,name,mobile,index){
      if(this.value1==''){
        this.$message.warning('请选择省份')
        return
      }
      if(this.value2==''){
        this.$message.warning('请选择城市')
        return
      }
      if(this.value3==''){
        this.$message.warning('请选择县区')
        return
      }
      if(this.address==''){
        this.$message.warning('请输入详细地址')
        return
      }
      let province = ''
      this.options1.map(item=>{
        if(item.cityid==this.value1){
          province = item.city_name
        }
      })
      let city = ''
      this.options2.map(item=>{
        if(item.cityid==this.value2){
          city = item.city_name
        }
      })
      let area = ''
      this.options3.map(item=>{
        if(item.cityid==this.value3){
          area = item.city_name
        }
      })
      let params = {
        order_id:id,
        name:name,
        mobile:mobile,
        province,
        city,
        area,
        address:this.address
      }
      this.$http.post('/api/root/packOrder/editAdress',params).then(res=>{
        console.log(res,'修改信息结果');
        if(res.code==1){
          this.ConsumerOrder[index].province=province;
          this.ConsumerOrder[index].city=city;
          this.ConsumerOrder[index].area=area;
          this.ConsumerOrder[index].address=this.address;
          this.$refs['xxxx'][0].doClose()
          this.$message.success('修改成功')
        }else {
          this.$message.info(res.msg)
        }
      })
    },
    select1(){
      this.getCityList()
    },
    // 城市选择
    select2(){
      if(!this.value1){
        this.$message.warning('请先选择省份')
        return
      }

      this.getAreaList()
      console.log(this.value2);
    },
    // 县区选择
    select3(){
      if(!this.value2){
        this.$message.warning('请先选择城市')
        return
      }
    },
    // 获取省份
    getProvince(){
      this.$http.post('/api/root/Region/getProvinceList').then(res=>{
        console.log(res,'省份');
        if(res.code==1){
          this.options1 = res.data?res.data:[]
        }
      })
    },
    // 获取城市
    getCityList(){
      this.$http.post('/api/root/Region/getCityList',{province_id:this.value1}).then(res=>{
        console.log(res,'城市列表');
        if(res.code==1){
          this.options2 = res.data?res.data:[]
        }
      })
    },
    // 获取县区
    getAreaList(){
      this.$http.post('/api/root/Region/getDistrictList',{city_id:this.value2}).then(res=>{
        console.log(res,'县区列表');
        if(res.code==1){
          this.options3 = res.data?res.data:[]
        }
      })
    },
    getUserInfo() {
      this.$http.post('api/root/KefuShop/consumerRecord', {
        chat_id: this.msgId
      }).then(res => {
        if (res.code === 1) {
          this.userInfoData = res.data
        } else {
          this.$message(res.msg)
        }
      }).catch(err => {
        this.$message(err.msg ? err.msg : err.toString())
      })
    } ,
    upRemark() {
      if(!this.text){
        this.$message('更新备注不能为空！');return
      }
      this.$http.post('api/root/KefuShop/setConsumerRecord', {
        chat_id: this.msgId,
        remark: this.text,
      }).then(res => {
        if (res.code === 1) {
          this.$message('更新成功！')
        } else {
          this.$message(res.msg)
        }
      }).catch(err => {
        this.$message(err.msg ? err.msg : err.toString())
      })
    } ,
    getproductLogs() {
      this.$http.post('api/root/KefuShop/productLogs', {
        chat_id: this.msgId
      }).then(res => {
        if (res.code === 1) {
          this.productLogs = res.data
        } else {
          this.$message(res.msg)
        }
      }).catch(err => {
        this.$message(err.msg ? err.msg : err.toString())
      })
    } ,
    scrollEvent(e) {
      if (this.noMore) {
        return false;
      }
      let windowHeight = e.target.clientHeight;
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight) {
        this.page++
        this.getConsumerOrder(true);
      }
    },
    getConsumerOrder(paging) {
      if(!paging){
        this.page=1
      }
      this.$http.post('api/root/KefuShop/ConsumerOrder', {
        chat_id: this.msgId,
        page: this.page,
        pagesize: this.pagesize
      }).then(res => {
        if (res.code === 1) {
          if (this.page * this.pagesize >= res.data.count) {
            this.noMore = true;
          }else {
            this.noMore = false;
          }
          if (paging) {
            res.data.data.map(item => {
              this.ConsumerOrder.push(item)
            })
          }else {
            this.ConsumerOrder=res.data.data
          }

        } else {
          this.$message(res.msg)
        }
      }).catch(err => {
        this.$message(err.msg ? err.msg : err.toString())
      })
    } ,
    formatDate(timestamp) {
      let date = new Date(timestamp)
      let y = date.getFullYear(); //年
      let m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let hour =date.getHours();
      let minutes = date.getMinutes();
      minutes = minutes < 10?('0'+minutes):minutes
      let s = date.getSeconds()
      s = s < 10 ? ('0' + s) : s
      const time = `${y}-${m}-${d} ${hour}:${minutes}:${s}`
      return time
    },
    getOrder() {
      this.$http.post('api/client/shop/package/order/list', {
        user_id: this.msgId,
        order_status: 'all',
      }).then(res => {
        if (res.code === 1) {
          this.orderData = res.data
        } else {
          this.$message(res.msg)
        }
      }).catch(err => {
        this.$message(err.msg ? err.msg : err.toString())
      })
    }
  }
}
</script>

<style lang="less">
#dialogBox{
  display: flex;
}
.userInfoPopupView {

  padding: 0 30px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .orderBox{
    flex: 1;
    overflow-y: scroll;
    .row-1{
      line-height: 40px;
    }
    .row-2{
      height: 40px;
      display: flex;
      font-size: 14px;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #EBEEF5;
      a{ text-decoration:none;color:#C3AB7C }
      .sp1{
        width: 100px
      }
      .sp2{
        flex: 1;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
    .row-3{
      margin-top: 10px;
    }
  }
  .logsBox{
    flex: 1;
    overflow-y: scroll;
    margin-top: 20px;
    .row{
      margin-bottom: 20px;
      height: 140px;
      .pl{
        float: left;
        border-radius: 8px;
        width: 140px;
        height: 140px;
      }
      .pr{
        margin-left: 20px;
        float: left;
        p{
          width: 300px;
          line-height: 30px;
        }
        .p1{
          font-size: 20px;
        }
        .p2{
          font-size: 14px;
        }
        .p3{
          font-size: 16px;
          color: red;
        }
      }
    }

  }
  .head {
    cursor: pointer;
    height: 60px;
    display: flex;
    font-size: 18px;
    color: #939393;
    border-bottom: 1px #939393 solid;

    span {
      flex: 1;
      text-align: center;
      line-height: 60px;
      position: relative;
    }

    .active:after {
      content: "";
      width: 100%;
      height: 4px;
      background-color: #C3AB7C;
      border-radius: 2px;
      position: absolute;
      bottom: -2px;
      left: 0;
    }
  }

  .infoBox {
    color: #333333;
    textarea{
      padding: 0 15px;
      font-size: 14px;
      line-height: 25px;
      width: 100%;
      height: 60px;
      outline: none;
      border-radius: 6px;
      border: none;
      resize:none;
      background: #F5F5F5;
    }
    .btn{
      margin: 15px auto;
      cursor: pointer;
      width: 150px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      border-radius: 6px;
      background: #00D552;
    }
    .row-1 {
      margin-top: 20px;
      line-height: 40px;
      font-size: 18px;
    }

    .row-2 {
      height: 30px;
      display: flex;
      align-items: center;
      font-size: 14px;

      .sp1 {
        margin-left: 10px;
        width: 200px;
      }
    }
  }
}
</style>